<template>
    <view class="fa_bu width_popup">

        <uni-popup :show="show"  :maskClick="false" type="center">
            <view class="popub_box">
                <view class="title font-regular">录制完成，发布到首页</view>
                <view class="des">
                    <view class="img_box">
                        <image :src="thumb" class="img" mode="scaleToFill"></image>
                    </view>
                    <view>
                        <view class="tname font-regular">{{title}}</view>
                        <view class="pname font-light">{{name}}</view>
                    </view>
                </view>
                <view class="text_areas">
                    <!--<input v-model="content" class="textarea" placeholder-class="place-placeholder"-->
                              <!--placeholder="写一写自己的想法，可以吸引更多的收听哦～"/>-->
                    <textarea v-model="content" class="textarea" placeholder-class="place-placeholder"
                              placeholder="写一写自己的想法，可以吸引更多的收听哦～"/>
                </view>
            </view>
            <view class="popub_btn">
                <view class="fa_btn cancel" @click="cancel">取消</view>
                <view class="fa_btn confirm" @click="save">发布到首页</view>
            </view>
        </uni-popup>
    </view>
</template>

<script>

  import uniPopup from "@/components/uni-popup/uni-popup.vue"

  export default {
    components: {uniPopup},
    name: "recordSave",
    props:{
      'show':{
        type:Boolean,
        defalut:false,
      },
      'title':{
        type:String,
        defalut:false,
      },'name':{
        type:String,
        defalut:false,
      },'thumb':{
        type:String,
        defalut:false,
      }
    },
    created: function () {

    },
    methods:{
      cancel:function () {
        this.$emit('cancel');
      },
      save:function () {
        this.$emit('submit',{content:this.content});
      }
    },

    data() {
      return {
        content:'',
      }
    }
  }
</script>

<style lang="scss">
    .fa_bu{
        .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
            padding: 0upx;
        }
        .popub_box{
            padding: 10upx 20upx 0;
            height: 580upx;
            .title{
                font-size: $uni-font-size-16;
                color: $uni-color-664e37;
                line-height: 46upx;

            }
            .des{
                display: flex;
                align-items: center;
                margin: 21upx 0 27upx;
                .img_box{
                    width:120upx;
                    height: 120upx;
                    border-radius: 10upx;
                    overflow: hidden;
                    margin-right: 20upx;
                    .img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .tname{
                    font-size: $uni-font-size-base;
                    color: $uni-color-664e37;
                    line-height: 48upx;
                }
                .pname{
                    color: $uni-color-876a48;
                    font-size: $uni-font-size-14;
                    line-height: 40upx;
                }
            }
            .text_areas{
                .textarea{
                    box-sizing: border-box;
                    width: 100%;
                    height: 190upx;
                    border: 2upx solid $uni-color-876a48;
                    opacity: 0.5;
                    font-size: $uni-font-size-14;
                    border-radius: 10upx;
                    color: rgba(135,106,72,.5);
                    padding: 26upx 36upx 0;
                }
                .place-placeholder{
                    font-size: $uni-font-size-14;
                    color: rgb(135,106,72);
                    font-weight: $font-light;
                }
            }

        }
        .popub_btn{
            width: 100%;
            height: 100upx;
            position: absolute;
            bottom: 0upx;
            left: 0upx;
            background-color: #eeeeee;
            display: flex;
            .fa_btn{
                width: 50%;
                height: 100upx;
                line-height: 100upx;
                text-align: center;
                font-size:$uni-font-size-base ;
            }
            .cancel{
                background-color: $uni-color-fffbf0;
                color: $uni-color-664e37;
            }
            .confirm{
                background-color:$uni-color-fcb300;
                color: #ffffff;
            }
        }
    }
</style>
